<template>
	<view>
		<view class="main">
			<view class="main_title">
				<image src="@/static/sy/my-output-value/title_icon_two.png" mode=""></image>
				<image src="@/static/sy/my-output-value/title_icon_one.png" mode=""></image>
				<text>产值规则</text>
				<image src="@/static/sy/my-output-value/title_icon_two.png" mode=""></image>
				<image src="@/static/sy/my-output-value/title_icon_one.png" mode=""></image>
			</view>
			<view class="main_content">
				<view class="main_content_l">1.</view>
				<view class="main_content_r">不同的NFR和徽章拥有不同算力；</view>
			</view>
			<view class="main_content">
				<view class="main_content_l">2.</view>
				<view class="main_content_r">转赠NFR或勋章成功后会扣除相应的算力；</view>
			</view>
			<view class="main_content">
				<view class="main_content_l">3.</view>
				<view class="main_content_r">
					<view class="">通分产出公式：</view>
					<view class="formula">消费获得通分数量=消费打卡金额*产值系数；</view>
				</view>
			</view>
			<view class="main_content">
				<view class="main_content_l">4.</view>
				<view class="main_content_r"> 产值系数为用户持有所有NFR算力与勋章算力总和对应表格系数，为了保证平台通证经济的稳定性，产值系数不定期会进行调整；</view>
			</view>
			<view class="line"></view>
			<view class="form_box">
				<view class="form_box_lable">
					<view class="form_box_lable_l form_box_head form_box_head_l"><text>用户算力/平台总算力</text><text>排名区域</text></view>
					<view class="form_box_lable_r form_box_head">产值系数</view>
				</view>
				<view class="form_box_lable" v-for="(item,sIndex) in list" :key="sIndex">
					<view class="form_box_lable_l">{{item.startRange}}%～{{item.endRange}}%</view>
					<view class="form_box_lable_r">{{item.value}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {outputManageLs,} from '@/api/sy.js'
	export default {
		data() {
			return {
				list:[],
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			async getList() {
				uni.showLoading({ title:'加载中' })
				try{
					var res = await outputManageLs()
					this.list = res.result
					uni.hideLoading()
				}
				catch{
					uni.hideLoading()
				}finally{
					setTimeout(res=>{
						uni.hideLoading()
					},4000)
				}
				
			},
		}
	}
</script>

<style>
	page {
		background-color: #F5F7F9;
	}

	view {
		box-sizing: border-box;
	}

	.main {
		margin: 30rpx;
		background-color: #FFFFFF;
		border-radius: 24rpx;
		padding: 40rpx 20rpx 80rpx;
	}

	.main_title {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 42rpx;
	}

	.main_title image {
		width: 15rpx;
		height: 19rpx;
	}

	.main_title text {
		font-size: 40rpx;
		color: #222222;
		margin: 0 20rpx;
	}

	.main_content {
		display: flex;
		font-size: 28rpx;
		color: #333333;
		margin-bottom: 16rpx;
	}
	.main_content_l{
		margin-right: 8rpx;
	}
	.main_content_r{
		line-height: 40rpx;
	}
	.formula{
		font-size: 28rpx;
		color: #333333;
		font-weight: bold;
		margin-top: 12rpx;
	}
	.line{
		height: 1rpx;
		background-color: #D4D4D4;
		margin: 36rpx 0 40rpx;
	}
	.form_box{
		border-top: 2rpx solid #E6E6E6;
		border-right: 2rpx solid #E6E6E6;
		border-left: 2rpx solid #E6E6E6;
		margin: 0 10rpx;
	}
	.form_box_lable{
		display: flex;
	}
	.form_box_lable_l{
		width: 50%;
		font-size: 28rpx;
		color: #333333;
		border-right: 2rpx solid #E6E6E6;
		border-bottom: 2rpx solid #E6E6E6;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 64rpx;
	}
	.form_box_lable_r{
		width: 50%;
		font-size: 28rpx;
		color: #333333;
		border-bottom: 2rpx solid #E6E6E6;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 64rpx;
	}
	.form_box_head{
		height: 110rpx;
		color: #222222;
		font-size: 30rpx;
		background-color: #F7F7F7;
	}
	.form_box_head_l{
		flex-direction: column;
	}
</style>
